<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 50px;
        border: 1px solid;
        overflow: hidden;
      }
      .lyric {
        height: 50px;
        /* border: 1px solid; */
        font-size: 22px;
        line-height: 50px;
        transform: translateX(98%);
        animation: run 15s linear 0s infinite;
      }

      @keyframes run {
        from {
          transform: translateX(98%);
        }
        to {
          transform: translateX(-100%);
        }
      }

      section {
        height: 50px;
        border: 1px solid;
        overflow: hidden;
      }
      section:hover .content {
        animation-play-state: paused;
      }

      .content {
        animation: scroll-top 65s linear 0s infinite;
      }
      @keyframes scroll-top {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="lyric">
        故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 Re So So
        Si Do Si La So La Si Si Si Si La Si La So
      </div>
    </div>

    <marquee loop="-1" scrollamount="26">
      故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 Re So So Si
      Do Si La So La Si Si Si Si La Si La So
    </marquee>

    <section>
      <div class="content">
        <p>《晴天》</p>
        <p></p>
        <p>词曲：周杰伦</p>
        <p></p>
        <p>演唱：周杰伦</p>
        <p></p>
        <p>故事的小黄花 从出生那年就飘着</p>
        <p></p>
        <p>童年的荡秋千 随记忆一直晃到现在</p>
        <p></p>
        <p>Re So So Si Do Si La</p>
        <p></p>
        <p>So La Si Si Si Si La Si La So</p>
        <p>吹着前奏 望着天空</p>
        <p></p>
        <p>我想起花瓣 试着掉落</p>
        <p></p>
        <p>为你翘课的那一天</p>
        <p></p>
        <p>花落的那一天</p>
        <p></p>
        <p>教室的那一间 我怎么看不见</p>
        <p>消失的下雨天 我好想再淋一遍</p>
        <p></p>
        <p>没想到 失去的勇气我还留着</p>
        <p></p>
        <p>好想再问一遍 你会等待还是离开</p>
        <p></p>
        <p>刮风这天 我试过握着你手</p>
        <p></p>
        <p>但偏偏 雨渐渐</p>
      </div>
    </section>
  </body>
</html>
